<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.keyword" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getexcel">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-upload
            :http-request="uploadFile"
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
          <el-button  type="primary" icon="el-icon-upload">点击上传</el-button>
        </el-upload>
        </el-form-item>
        <!--点击下载-->
        <el-form-item>
            <el-button  type="primary" @click="download">点击下载</el-button>
            <!--          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->

        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <template>
      <el-table :data="pageInfo.data" highlight-current-row v-loading="loading" @selection-change="selsChange" style="width: 100%;">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
<!--        <el-table-column :index="calculateIndex" width="60" label="序号">-->
<!--        </el-table-column>-->
        <el-table-column label="序号" width="60">
          <template slot-scope="scope">
            {{ calculateIndex(scope.$index) }}
          </template>
        </el-table-column>


        <el-table-column prop="name" label="全称" width="120" sortable>
        </el-table-column>
        <el-table-column prop="nameShort" label="称呼" width="120"  sortable>
        </el-table-column>
        <el-table-column prop="company" label="公司" width="120" sortable>
        </el-table-column>
        <el-table-column prop="occupation" label="职业" width="120" sortable>
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="120" sortable>
        </el-table-column>
        <el-table-column prop="phone" label="手机" width="120" sortable>
        </el-table-column>
        <el-table-column prop="movePhone" label="移动电话" width="120" sortable>
        </el-table-column>
        <el-table-column prop="address" label="地址" width="120" sortable>
        </el-table-column>
        <el-table-column prop="describe" label="描述" width="120" sortable>
        </el-table-column>

        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
                size="mini"
                type="danger"
                @click="handleDel(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
<!--        <el-table-column label="操作" width="150">-->
<!--          <template scope="scope">-->
<!--            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--            <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
     <el-col>
       <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量导出</el-button>
<!--
       @size-change="handleSizeChange"  当涉及每页条数发送改变时候触发的函数
       @current-change="handleCurrentChange"  页数发送改变
       :current-page="this.filters.currentpage"当前第几页
         :page-sizes="[5, 20, 50]"  设定每页条数
           :page-size="this.filters.pageSize"总条数
-->
       <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           style="float: right"
           :current-page="this.filters.currentpage"
           :page-sizes="[5, 20, 50]"
           :page-size="this.filters.pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="pageInfo.total">
       </el-pagination>
     </el-col>

    </template>

  </section>
</template>
<script>
import { getUserList } from '../../api/api';
import axios from "axios";
import {date} from "mockjs/src/mock/random/date";
//import NProgress from 'nprogress'
export default {
  data() {
    return {

      sels:[],//列表选中列
      fileList: [],//上传文件数组
      filter:{
        name:''
      },
      filters: {
        keyword: '',
        pageSize:5,
        currentpage:1
      },
      pageInfo:{
        data: [],
        total: 0
      },
      loading: false,
      users: []
    }
  },

  methods: {

    //序号分页递增
    calculateIndex(index) {
      const currentPage = this.filters.currentpage || 1;
      const pageSize = this.filters.pageSize || 10;
      const result = (currentPage - 1) * pageSize + index + 1;
      // console.log(`Index for row ${index}: ${result}`);
      return result;
    },

    //删除
    handleDel(index,row){
      console.log(index,row,"删除")
      //弹出确认框
      this.$confirm('此操作将永久删除，确认删除吗？','警告',{
        confirmButtonText:'确认删除',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        this.$http.delete("/file/delete/"+row.id)
            .then(result =>{
              if (row){
                this.$message({type:'success',message:'删除成功'})
                this.getExcelUsers();
              }else{
                this.$message("删除失败")
              }
            })

      })
    },
    //批量导出
    batchRemove:function(){
      var ids = this.sels.map(item => item.id);
      console.log(ids,"89898")
      this.$confirm('确认导出选中记录吗？', '提示', {
        type: 'warning'
      }).then(() =>{
        this.$http.patch("/file/ids",ids).then(res =>{
          console.log(this.sels,"ids")
        })
      })

    },
    //当涉及每页条数发送改变时候触发的函数
    selsChange:function(sele){
      this.sels = sele
    // let  id = sele.map(sele=>sele.id);
    // this.sels.push(id)
    //   console.log(this.sels)
    },
    //页数发送改变
    handleSizeChange(val) {
      this.filters.pageSize = val;
      this.getExcelUsers();
      /**
       * 将其推到第一页
       * @type {number}
       */
      this.filters.currentpage = 1;
      console.log(`每页 ${val} 条`);
    },
    //当前第几页
    handleCurrentChange(val) {
      this.filters.currentpage = val;
      this.getExcelUsers();
      /**
       * 将其推到第一页
       * @type {number}
       */
      // this.filters.currentpage = 1;
      console.log(`当前页: ${val}`);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    //文件上传
    uploadFile(file) {
      // 创建一个 FormData 对象，并将文件添加到其中
      let formData = new FormData();
      formData.append('file', file.file);  //file.raw 后台接收不到

      // 使用 Axios 发送 POST 请求到后端 API 端点
      axios
          .post("/file/file", formData)
          .then(response => {
            console.log('文件上传成功', response);
            console.log(response.data.message,"jjj");
            this.res = response.data.message
            this.$message.success(this.res);
          })
          .catch(error => {
            console.error('文件上传失败', error);
            this.$message.error('文件上传失败');
          });
    },

    //高级查询
    getexcel(name){
      console.log(name,"999999999")
      // this.getExcelUsers();
      // this.filters.currentpage = 1;
      this.$http.post("/file",this.filters).then(res =>{
        if (res.data.success){
            this.pageInfo = res.data.data
          console.log(res.data.data,"高级查询");
            // this.selsChange();
            // this.handleSizeChange();
            // this.handleCurrentChange()
        }
      })
    },


    //文件下载
    // download() {
    //   alert("9999")
    //   this.$http.get("/file/getfile").then(res => {
    //     if (res.data.success) {
    //       this.$message({message: "保存成功"})
    //     }
    //   })
    // },
    //获取用户列表

    download() {
      alert("9999")
      // let param = {
      //   keyword: this.filters.keyword,
      //   ids:this.sels
      // }
      this.$http.get("/file/getfile").then(res => {
        if (res.data.success) {
          this.$message({message: "保存成功"})
        }
      })
    },
    getExcelUsers() {
      // 获取参数
      // 发起请求
      this.$http.post("/file",this.filters)
          .then(res =>{
            res = res.data
            if (res.success){
              // this.total = res.data.total
              // this.tableList = res.data.data
              this.pageInfo = res.data
            }else{
              // console.log("这个是"+res)
              this.$message.error("网络异常请联系管理员");
            }
          })
          .catch(res =>{
          })
    },
    // getExcelUsers() {
    //   // 获取参数
    //   // 发起请求
    //   this.$http.get("/file/getAll", {params:{name:this.filters}})
    //       .then(res =>{
    //         res = res.data
    //         console.log(res.data,"数据")
    //         if (res.success){
    //           // this.total = res.data.total
    //           // this.tableList = res.data.data
    //           this.pageInfo = res.data
    //           console.log(this.pageInfo,"9999999")
    //         }else{
    //           console.log("这个是"+res)
    //           this.$message.error("网络异常请联系管理员");
    //         }
    //       })
    //       .catch(res =>{
    //       })
    // },
  },

  mounted() {
    //进入页面就调用
    this.getExcelUsers();
    // 手动调用 calculateIndex 并打印信息
    // const index = this.calculateIndex(0); // 传入一个示例的索引
    // console.log('Manual call to calculateIndex:', index);
  },
}

</script>

<style scoped>

</style>
